import React, { useState, useEffect, useImperativeHandle } from 'react';
import { connect } from 'dva';
import { Row, Col, Form, Input, message, Spin, InputNumber } from 'antd';
import request from '@/utils/request';
import styles from '../styles.less';

const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

const formItemLayoutText = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};

function AttrValueAdd(props) {
  const { getFieldDecorator } = props.form;
  const [spinning, setSpinning] = useState(false);

  useEffect(() => {
    if (props.attrValueAddType === 'add') {
      props.form.setFieldsValue({});
    } else if (props.attrValueAddType === 'modify') {
      props.form.setFieldsValue({
        attrValueId: props.selectAttrValue.attrValueId,
        attrValueName: props.selectAttrValue.attrValueName,
        attrValue: props.selectAttrValue.attrValue,
        attrValueDesc: props.selectAttrValue.attrValueDesc,
        attrValueSort: props.selectAttrValue.attrValueSort,
      });
    }
  }, [props.attrValueAddType]);

  // 新增
  useImperativeHandle(props.cRef, () => ({
    handleAdd: () => {
      return new Promise(function(resolve) {
        props.form.validateFields((err, value) => {
          if (err) return;

          setSpinning(true);

          if (props.attrValueAddType === 'add') {
            request('pmc/pms/attrValue/add', { data: value }).then(res => {
              if (res && res.success === true) {
                setSpinning(false);
                message.success('新增成功');
                resolve(true);
              } else {
                setSpinning(false);
                if (res && res.errMessage) {
                  message.error(res.errMessage);
                } else {
                  message.error('新增失败');
                }
              }
            });
          } else if (props.attrValueAddType === 'modify') {
            request('pmc/pms/attrValue/update', { data: value }).then(res => {
              if (res && res.success === true) {
                setSpinning(false);
                message.success('修改成功');
                resolve(true);
              } else {
                setSpinning(false);
                if (res && res.errMessage) {
                  message.error(res.errMessage);
                } else {
                  message.error('修改失败');
                }
              }
            });
          }
        });
      });
    },
  }));

  return (
    <Spin spinning={spinning}>
      <Form>
        <Row>
          <Col span={12}>
            <Form.Item label="属性规格名称" {...formItemLayout}>
              {getFieldDecorator('attrName', { initialValue: props.selectAttrSpec.attrName })(
                <Input maxLength={100} placeholder="请输入属性规格名称" disabled />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="属性值名称" {...formItemLayout}>
              {getFieldDecorator('attrValueName', {
                rules: [
                  {
                    required: true,
                    message: '属性值名称不能为空',
                  },
                ],
              })(
                <Input
                  placeholder="请输入属性值名称"
                  disabled={
                    !(props.attrValueAddType === 'add' || props.attrValueAddType === 'modify')
                  }
                  maxLength={50}
                />
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="属性值" {...formItemLayout}>
              {getFieldDecorator('attrValue', {
                rules: [
                  {
                    required: true,
                    message: '属性值不能为空',
                  },
                ],
              })(
                <Input
                  placeholder="请输入属性值"
                  disabled={
                    !(props.attrValueAddType === 'add' || props.attrValueAddType === 'modify')
                  }
                  maxLength={100}
                />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="属性值排序号" {...formItemLayout}>
              {getFieldDecorator('attrValueSort', {
                rules: [
                  {
                    required: true,
                    message: '属性值排序号不能为空',
                  },
                ],
              })(
                <InputNumber
                  className={`${styles['ant-input-number']}`}
                  min={1}
                  step={1}
                  defaultValue={1}
                  placeholder="请输入属性值排序号"
                  disabled={
                    !(props.attrValueAddType === 'add' || props.attrValueAddType === 'modify')
                  }
                />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item label="属性值描述" {...formItemLayoutText}>
              {getFieldDecorator('attrValueDesc')(
                <TextArea
                  rows={5}
                  placeholder="请输入属性值描述"
                  disabled={
                    !(props.attrValueAddType === 'add' || props.attrValueAddType === 'modify')
                  }
                  maxLength={500}
                />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row style={{ display: 'none' }}>
          <Col span={1}>
            <Form.Item label="业务规格Id" {...formItemLayout}>
              {getFieldDecorator('attrId', { initialValue: props.selectAttrSpec.attrId })(
                <Input disabled />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row style={{ display: 'none' }}>
          <Col span={1}>
            <Form.Item label="属性值Id" {...formItemLayout}>
              {getFieldDecorator('attrValueId', { initialValue: props.selectAttrSpec.attrId })(
                <Input disabled />
              )}
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Spin>
  );
}

export default connect(({ busiObjManage }) => ({
  selectAttrSpec: busiObjManage.selectAttrSpec,
  selectAttrValue: busiObjManage.selectAttrValue,
  attrValueAddType: busiObjManage.attrValueAddType,
}))(Form.create()(AttrValueAdd));
